<template>
    <!-- 已签署合同 -->
    <div class="gd-main" style="padding:0;">
        <el-row type="flex" :gutter="20" style="margin-top:20px;">
            <el-col :span="6">
                <div class="md-statics1-item" style="margin:0;">
                    <!-- 需要使用花括弧把 data 属性的数据填入 html 元素的文本 -->
                    <div>{{projectNum}}</div>
                    <div>在建项目数</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="md-statics1-item" style="margin:0;background-color:#ccffff;">
                    <!-- 需要使用花括弧把 data 属性的数据填入 html 元素的文本 -->
                    <div>{{contractNum}}</div>
                    <div>已签订合同数</div>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" style="margin-top:20px;">
            <el-col :span="22">
                <!-- 项目搜索 -->
                <!-- 表单配置
                    :rules - "rules" 验证规则对象 在 data() 中配置
                    <el-form-item> 标签
                           prop="projectName" 配置此属性，需要验证
                -->
                <el-form 
                    style="margin-top:0;"
                    ref="form" 
                    :model="form" 
                    label-position="left"
                    label-width="100px">
                    <!-- 项目名称 -->
                    <el-col :span="7">
                        <el-form-item label="项目名称" style="margin-bottom:20px !important;">
                            <el-input v-model="form.projectName" placeholder="输入项目"></el-input>   
                        </el-form-item>
                    </el-col>
                    <!-- 项目状态 -->
                    <el-col :span="7">
                        <el-form-item label="项目状态" style="margin-bottom:20px !important;">
                            <el-select style="width:100%" v-model="form.projectStatus" placeholder="选择项目状态">
                                <el-option 
                                    v-for="option in projectStatusCollection" 
                                    :key="option.value"
                                    :label="option.label" 
                                    :value="option.value"></el-option>
                            </el-select>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="3">
                        <el-button style="width:100%;" type="primary" @click="onSubmit('form')">确定</el-button>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
        <!-- table表格 -->
        <!-- 
            @表格配置
                1. <el-table> 标签
                    1.1 :data - "tableData"
                        1.1.1 tableData 为对象数组，拿到服务器器的数据进行赋值
                        1.1.2 tableData 要在 data() 方法返回的 对象里配置，初始值设置为 [] 空数组
                2. <el-table-column> 标签
                    2.1 prop - "projectName" 列的属性名， tableData 里的对象的属性 
                    2.2 lable - "项目" 列的名称
                    2.3 width - "360" 列的宽度
        -->
        <!-- height: 100vh - 131px -144px -80px -52px -->
        <el-table :data="tableData" height="calc(100vh - 407px)">
            <el-table-column prop="projectStatus" label="项目状态" width="120"></el-table-column>
            <el-table-column prop="projectName" label="项目" width="220"></el-table-column>
            <el-table-column prop="dataTotal" label="已签订合同数" width="120"></el-table-column>
            <el-table-column width="200" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="teamContract(scope.row)">查看班组列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!--
            @分页配置
                :total - pagination.total 总条数
                :pager-count="7"显示的页码按钮数量, 大于等于 5 <= 21 基数
                :current-page = "pagination.currentPage" 当前的选中的页码
                :page-size="10" 每页显示的条目数
                :page-sizes="" 可选则的每页显示的条目数
                layout="total, sizes, prev, pager, next, jumper" 显示的元素
                @size-change="handleSizeChange"  - handleSizeChange 每页的条数改变时触发，参数为选择的条数
                @current-change="handleCurrentChange" - handleCurrentChange methods 配置 参数为点击的页码，或者输入的页码  
        -->
        <el-pagination 
            style="margin-top:20px;" 
            :total="pagination.total"
            :pager-count="pagination.pageCount"
            :current-page="pagination.currentPage" 
            :page-sizes="pagination.pageSizes" 
            :page-size="pagination.pageSize" 
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            >
        </el-pagination>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    //引入 ajax 请求的方法
    import {prjectContract,queryContractProjectNum} from '@/request/team';
    
    export default {
        computed:{
            //登录后的数据在这里进行给实例赋值，就可以用 this.xxx 进行访问了
          ...mapGetters(['userId','currId','roleId','verificationStatus'])  
        },
        // 页面上需要展示的数据都要在 [data方法] 的 return 语句返回的对象里存在声明，否则会报错 
        data() {
            return {
                //项目数量
                projectNum: 0,
                //合同数量
                contractNum: 0,
                //表单数据 - 项目名称
                form:{
                    projectName: '',
                    //表单 - 项目状态
                    projectStatus: ''
                },
                //表格数据
                tableData: []
            }
        },
        methods: {
            //提交表单
            onSubmit(formRef){
                this.$refs[formRef].validate((valid) => {
                    //验证通过
                    if(valid){
                        console.log('表单项验证通过');
                        console.log('【表单查询对象】',JSON.stringify(this.form));
                        this.prjectContract({
                            projectName:this.form.projectName,
                            projectStatus:this.form.projectStatus
                        });
                    }
                });
            },
            //切换每页显示的数量量
            handleSizeChange(pageSize) {
                console.log('每页显示' + pageSize + '条数据');
                this.pagination.pageSize = pageSize;
                this.prjectContract({limit:pageSize});
            },
            //选中的页码
            handleCurrentChange(currentPage) {
                console.log('点击了第 ' + currentPage + '页');
                this.pagination.currentPage = currentPage;
                this.prjectContract({page:currentPage});
            },
            //待签订合同查询 - 将请求方法进行再次封装，方便复用
            prjectContract(queryObj = {}){
                /*
                    @param
                            queryObj 用来动态替换查询参数
                            
                */
                let params = { 
                    userId:this.userId,
                    //当前页
                    page:this.pagination.currentPage,
                    //每页显示的条数
                    limit:this.pagination.pageSize,
                    //合同状态 - 已签订
                    contractType:3,
                    //合同类型 - 班组
                    originatorType:1,
                    //请求类型 - 分包
                    sourceType:1
                };
                //参数进行动态拷贝
                Object.assign(params,queryObj);
                return prjectContract(params).then(res => {
                    //列表数据
                    this.tableData = res.data.result || [];
                    //分页总数据
                    this.pagination.total = res.data.resultTotal || 0;
                });
            },
            //项目数量查询
            queryContractProjectNum(){
                let params = { 
                    userId:this.userId,
                    //当前页
                    page:this.pagination.currentPage,
                    //每页显示的条数
                    limit:this.pagination.pageSize,
                    //合同状态 - 已签订
                    contractType:3,
                    //合同类型 - 班组
                    originatorType:1,
                    //请求类型 - 分包
                    sourceType:1
                };
                return queryContractProjectNum(params).then(res => {
                    this.projectNum = res.data.projectNum;
                    this.contractNum = res.data.contractNum;
                });
            },
            //班组合同
            teamContract(curRow){
                //根据参数进行跳转
                this.$router.push({
                    //跳转的路由名称
                    name:'SignedTeam',
                    //查询对象
                    query:{
                        projectName:curRow.projectName,
                        projectId:curRow.projectId,
                    }
                });
            }
        },
        //vue 实例的模版渲染完成后执行
        mounted() {
            //待签订合同查询
            this.prjectContract();
            //项目数量查询
            this.queryContractProjectNum();
        }
    }
</script>